<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="index.css"></link>
</head>
<body>
    <div id="app">
        <!-- 项目头部信息 -->
        <div class="project-header">
            <h1 class="project-title">LazyCaptcha - .NET 验证码组件</h1>
            <div class="project-links">
                <a href="https://gitee.com/pojianbing/lazy-captcha" target="_blank" class="repo-link gitee">
                    <span class="link-icon">📦</span> Gitee
                </a>
                <a href="https://github.com/pojianbing/LazyCaptcha" target="_blank" class="repo-link github">
                    <span class="link-icon">🐙</span> GitHub
                </a>
            </div>
        </div>

        <div class="tip">
            <span>主题<el-switch v-model="isDarkMode" active-text="深色" inactive-text="浅色" active-color="#61afef" inactive-color="#409eff" @change="toggleTheme"></el-switch></span>
            <span style="margin-left: 20px;">粗体<el-switch v-model="textBold" active-color="#13ce66" inactive-color="#ff4949" @change="handleChange"></el-switch></span>
        </div>

        <div class="grid">
            <!-- 第一行显示字体 -->
            <div class="cell">类型/字体</div>
            <div class="cell" v-for="font in fonts">{{font}}</div>

            <template v-for="group in groupCaptchas">
                <div class="cell">{{group.type}}</div>

                <div class="cell" v-for="captcha in group.captchas">
                    <lazy-img :src="captcha.url" v-if="captcha.isSupport" @click.native="showConfig(captcha)"></lazy-img>
                    <span class="unsupport" v-else>不支持</span>
                </div>
            </template>

        </div>

        <!-- 项目介绍和使用说明 -->
        <div class="project-intro">
            <div class="intro-section">
                <h2>项目介绍</h2>
                <p>LazyCaptcha 是一个简单易用的 .NET 验证码组件，支持多种验证码类型、字体样式和图片配置。</p>
            </div>

            <div class="intro-section">
                <h2>快速开始</h2>
                <div class="code-example">
                    <h3>1. 安装 NuGet 包</h3>
                    <pre><code>dotnet add package Lazy.Captcha.Core</code></pre>
                </div>

                <div class="code-example">
                    <h3>2. 配置服务（Program.cs）</h3>
                    <pre><code>builder.Services.AddCaptcha(builder.Configuration);</code></pre>
                </div>

                <div class="code-example">
                    <h3>3. 注入使用</h3>
                    <pre><code>public class CaptchaController : Controller
{
    private readonly ICaptcha _captcha;

    public CaptchaController(ICaptcha captcha)
    {
        _captcha = captcha;
    }

    // 生成验证码
    public IActionResult Generate(string id)
    {
        var info = _captcha.Generate(id);
        return File(info.Bytes, "image/gif");
    }

    // 校验验证码
    public bool Validate(string id, string code)
    {
        return _captcha.Validate(id, code);
    }
}</code></pre>
                </div>

                <div class="code-example">
                    <h3>4. 配置选项（appsettings.json）</h3>
                    <pre><code>{
  "CaptchaOptions": {
    "CaptchaType": 10,          // 验证码类型
    "CodeLength": 4,            // 验证码长度
    "ExpirySeconds": 60,        // 过期时间（秒）
    "IgnoreCase": true,         // 忽略大小写
    "ImageOption": {
      "Animation": true,        // 是否启用动画
      "FontSize": 36,           // 字体大小
      "Width": 150,             // 宽度
      "Height": 50              // 高度
    }
  }
}</code></pre>
                </div>
            </div>

            <div class="intro-footer">
                <p>💡 点击上方任意验证码图片，查看详细配置信息和实时校验功能</p>
            </div>
        </div>

        <!-- 遮罩层 - 点击外部关闭 -->
        <div class="config-overlay" v-if="selectedConfig" @click="closeConfig"></div>

        <!-- 配置信息显示区域 -->
        <div class="config-panel" v-if="selectedConfig">
            <div class="config-header">
                <h3>验证码配置信息 - {{selectedConfig.type}} / {{selectedConfig.font}}</h3>
                <button class="close-btn" @click="closeConfig">×</button>
            </div>
            <div class="config-content">
                <div class="config-section">
                    <h4>配置信息 (Configuration)</h4>
                    <pre class="code-block">{{configJson}}</pre>
                </div>

                <div class="config-section">
                    <h4>cURL 请求示例</h4>
                    <pre class="code-block">{{curlCommand}}</pre>
                </div>

                <div class="config-section">
                    <h4>HTTP 请求原文</h4>
                    <pre class="code-block">{{httpRequest}}</pre>
                </div>

                <div class="config-section">
                    <h4>验证码示例与校验测试</h4>
                    <div class="image-preview">
                        <img :src="captchaImageUrl" alt="验证码示例" @click="refreshCaptcha" class="captcha-image" title="点击刷新验证码" />
                        <p class="image-note">Content-Type: image/gif</p>
                        <p class="image-note">验证码ID: {{captchaId}}</p>
                        <p class="image-hint">💡 点击图片可刷新验证码</p>
                    </div>

                    <div class="validate-container">
                        <div class="validate-note">
                            <p><strong>⚠️ 架构说明：</strong></p>
                            <p>上方展示的验证码使用 <code>/captcha/dynamic</code> 接口，通过 <code>CaptchaServiceBuilder</code> 创建独立实例（支持自定义配置），因此无法直接校验。</p>
                            <p>下方提供使用注入实例的验证码用于校验测试（使用 appsettings.json 配置）。</p>
                            <p class="architecture-note">💡 这是 LazyCaptcha 的架构设计：Builder方式适合灵活展示，注入方式适合业务校验。</p>
                        </div>

                        <div class="validate-demo-section">
                            <h5>校验功能测试（使用注入实例）</h5>
                            <div class="test-captcha-area">
                                <img :src="testCaptchaUrl" alt="测试验证码" class="test-captcha-image" @click="generateTestCaptcha" title="点击刷新验证码" />
                                <p class="image-note">验证码ID: {{testCaptchaId}}</p>
                                <p class="test-config-note">使用 appsettings.json 配置（CodeLength=2, CaptchaType=10）</p>
                            </div>
                        </div>

                        <div class="validate-input-group">
                            <label>输入验证码：</label>
                            <input
                                type="text"
                                v-model="validateCode"
                                placeholder="请输入验证码内容"
                                class="validate-input"
                                @keyup.enter="validateCaptcha(false)"
                            />
                        </div>
                        <div class="validate-buttons">
                            <button class="validate-btn validate-btn-once" @click="validateCaptcha(false)">
                                校验（一次性）
                            </button>
                            <button class="validate-btn validate-btn-multi" @click="validateCaptcha(true)">
                                校验（可重复）
                            </button>
                        </div>
                        <div class="validate-result" v-if="validateResult">
                            <div class="result-header" :class="{'success': validateResult.success, 'error': !validateResult.success}">
                                <span class="result-icon">{{validateResult.success ? '✓' : '✗'}}</span>
                                <span class="result-text">{{validateResult.success ? '校验成功' : '校验失败'}}</span>
                            </div>
                            <div class="result-details">
                                <p><strong>校验方式：</strong>{{validateResult.isReusable ? '可重复校验' : '一次性校验'}}</p>
                                <p><strong>请求URL：</strong>{{validateResult.url}}</p>
                                <p><strong>响应结果：</strong>{{validateResult.response}}</p>
                                <p class="result-note" v-if="!validateResult.isReusable">
                                    💡 提示：一次性校验模式下，验证成功后验证码会失效，后续请求会返回 false
                                </p>
                                <p class="result-note" v-else>
                                    💡 提示：可重复校验模式下，验证码可以多次验证（通过设置 removeIfSuccess=false）
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="vue.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="index.js"></script>
</body>
</html>